import { ElStep, ElSteps } from 'element-plus';
import { defineComponent, ref } from 'vue';
import Style from './1080.module.scss';
import Num from './num';
import router from "@/router";

export const Steps = defineComponent({
    setup() {

        const title =router.currentRoute.value.meta.title;
        const step = ref(3);
        const steptitle = ref("选择科室");
        const stepList = ref([
            {
                id:'1',
                title: "读卡"
            },
            {
                id:'2',
                title: "选择诊区"
            },
            {
                id:'3',
                title: "选择科室"
            },
            {
                id:'4',
                title: "医生选择"
            },
            {
                id:'5',
                title: "号源选择"
            },
            {
                id:'6',
                title: "信息确认"
            },
            {
                id:'7',
                title: "领取凭条"
            }
        ]);
        const activeindex = stepList.value.findIndex(item => item.title === title);

        return () => (<>
            <div class={Style.steps}>
                <div class={Style.steps_pad}>
                    <ElSteps
                        active={activeindex}
                        align-center
                        finish-status="success"
                    >
                        {
                            stepList.value.map((item, index) => {
                                return <ElStep title={item.title} >
                                    {{
                                        icon: () => {
                                            return <>
                                                <Num num={index} activeNum={activeindex}></Num>
                                            </>
                                        }
                                    }}
                                </ElStep>
                            })
                        }
                    </ElSteps>
                </div>

            </div>
        </>);
    }
})
